#lucky-draw {
  width: 100%;
  text-align: center;
  position: relative;
  z-index: $z-index-lucky-draw; // make sure contents are on top of confetting
}

.title {
  height: auto;
  max-width: $title-width;
  width: 100%;
  margin: $title-margin-top 0 $title-margin-bottom 0;
  position: relative;
  z-index: $z-index-title; // make sure title on top of sunburst
  color: $color-title-border;
  display: inline-block;

  @each $media-query, $factor in $scale-factors {
    @media #{$media-query} {
      max-width: $title-width * $factor;
      margin: $title-margin-top 0 $title-margin-bottom * $factor 0;
    }
  }

  svg {
    width: 100%;
    height: auto;
    display: block;
  }
}

.control-group {
  position: absolute;
  top: 1rem;
  right: 1rem;

  .icon-button {
    margin: 0 0 0 1.5rem;
  }
}

.slot {
  position: relative;

  &__outer {
    width: $slot-width;
    height: $slot-height;
    padding: $slot-border-width;
    margin: 0 auto;
    border-radius: $slot-border-radius;
    @include shadow('large');
    background: $color-slot-background url(@images/light-blubs.svg);
    position: relative;
    z-index: $z-index-slot; // make sure slot is on top of sunburst
  }

  &__inner {
    background-color: $color-slot-inner-background;
    width: 100%;
    height: 100%;
    border-radius: $slot-border-radius;
    position: relative;
    overflow: hidden;
    padding: $slot-inner-padding;
  }

  &__shadow {
    background: linear-gradient(
      180deg,
      rgba($color-white, 0.1) 0.13%,
      rgba($color-black, 0.1) 100%
    );
    height: 5.625rem;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    border-bottom-right-radius: $slot-border-radius;
    border-bottom-left-radius: $slot-border-radius;
  }

  @each $media-query, $factor in $scale-factors {
    @media #{$media-query} {
      width: $slot-width * $factor;
      height: $slot-height * $factor;
      margin: 0 auto;

      &__outer {
        transform: scale($factor);
        transform-origin: top left;
      }
    }
  }
}

.reel {
  width: 100%;

  > div {
    height: $reel-item-height;
    font-size: 3.75rem;
    font-weight: bold;
    text-align: center;
    line-height: $reel-item-height;
    color: $color-slot-text;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    /* enable gpu accelaration to fix iOS flicker issue */
    transform: translate3d(0, 0, 0);
  }
}

#draw-button {
  width: $draw-button-width;
  max-width: 100%;
  margin: $draw-button-margin-top 0 0;
  position: relative;
  z-index: $z-index-draw-button; // make sure draw button on top of sunburst

  @each $media-query, $factor in $scale-factors {
    @media #{$media-query} {
      width: $draw-button-width * $factor;
      margin: $draw-button-margin-top * $factor 0 0;
      font-size: max((1.75rem * $factor), 1rem);
      line-height: max((1.75rem * $factor), 1rem);
      padding: 1rem * $factor 0.625rem * $factor;
      border-radius: 0.625rem * $factor;
      @include shadow('large', $factor);
    }
  }
}

.settings {
  position: fixed;
  z-index: $z-index-settings - 1;
  background-color: $color-settings-mask;
  content: ' ';
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  display: none;

  &__panel {
    position: fixed;
    top: 0;
    right: 0;
    z-index: $z-index-settings;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    max-width: $setting-panel-max-width;
    padding: 3.125rem 3.125rem 0 3.125rem;
    overflow: auto;
    -webkit-overflow-scrolling: auto;

    // Worksround for firefox overflow padding bottom issue
    // https://bugzilla.mozilla.org/show_bug.cgi?id=748518
    &__group:last-child {
      padding-bottom: 3.125rem;
    }

    @media #{$mobile} {
      padding: 10% 10% 0 10%;

      &__group:last-child {
        padding-bottom: 10%;
      }
    }
  }

  &__title {
    margin: 0 0 1.875rem 0;
    font-size: 2rem;
    font-weight: bold;
  }

  #settings-save,
  #settings-close {
    margin: 1.875rem 0 0 0;
    display: block;
    width: 100%;
  }
}

.theme--red .settings__panel {
  background-color: $color-settings-background-red;
  color: $color-text-light;
}

.theme--purple .settings__panel {
  background-color: $color-settings-background-purple;
  color: $color-text-light;
}

// Winning effects
.sunburst {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -50vh 0 0 -50vw;
  width: 100vw;
  height: 100vh;
  display: none;
  z-index: $z-index-sunburst;
  pointer-events: none;
  overflow: hidden;

  > img {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -50vmin 0 0 -50vmin;
    width: 100vmin;
    height: auto;
    animation: rotate 10s infinite linear;
  }
}

.confetti {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: $z-index-confetti;
  pointer-events: none;
}
